<template>
  <view class="about-page flex-between fdc" :style="my_style">
    <view class="w100">
      <view class="top-box flex-between fdc">
        <image class="logo u-m-b-42" :src="info.logo" mode=""></image>
        <view class="name u-m-b-8">{{ info.name }}</view>
        <!-- <text class="font-weight-500">v1.0.0</text> -->
      </view>
      <view class="cell-list">
        <view
          class="u-p-l-30 bg-white"
          v-for="(item, index) in list"
          :key="index"
          :class="item.space ? 'u-m-b-20' : ''"
          @click="jump(item.link)"
        >
          <view class="flex-between u-flex-1 u-font-32 u-border-bottom u-p-b-22 u-p-t-22 u-p-r-30">
            <text>{{ item.title }}</text>
            <view class="flex-row">
              <text class="u-m-r-12 light-color">{{ item.value }}</text>
              <u-icon name="arrow-right" color="#CCCCCC" size="30"></u-icon>
            </view>
          </view>
        </view>
        <view class="u-p-l-30 bg-white" @click="callPhone(info.service_phone)">
          <view class="flex-between u-flex-1 u-font-32 u-border-bottom u-p-b-22 u-p-t-22 u-p-r-30">
            <text>客服电话</text>
            <view class="flex-row">
              <text class="u-m-r-12">{{ info.service_phone }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="u-text-center">
      <!-- <view class="light-color">http://hisi.beyondin.com/</view> -->
      <view class="light-color">{{ info.copyright_desc }}</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        info: {},
        list: [
          {
            title: '关于我们',
            link: '/views/login/protocol?tag=aboutus',
          },
          {
            title: '服务协议',
            link: '/views/login/protocol?tag=servicepolicy',
          },
          {
            title: '隐私政策',
            link: '/views/login/protocol?tag=privacypolicy',
          },
        ],
      }
    },
    onLoad(options) {
      this.copyright()
    },
    methods: {
      async copyright() {
        const res = await this.$api.common.system('copyright')
        if (res.code === 200) {
          this.info = res.data
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .about-page {
    height: 100%;
    padding-bottom: 24rpx;

    .top-box {
      padding: 60rpx 0 32rpx;

      .logo {
        width: 176rpx;
        height: 176rpx;
        border-radius: 48rpx;
      }

      .name {
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
        letter-spacing: 5rpx;
        color: rgba(0, 0, 0, 0.87);
      }
    }
  }
</style>
